<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width",initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<embed src="video/bg.mp3" hidden="true" autostart="true" loop="true" />	
		<title>女神来袭</title>
		<style>
			body{
				margin: 0;
				background:gray;
			}
			#wrap{
				width: 300px;
				height: 400px;
				position: relative;
				margin:100px auto;
				/*定义 3D 元素距视图的距离*/
				-webkit-perspective:3000px;
				-moz-perspective: 3000px;
				-ms-transform:perspective(3000px);
				-ms-perspective:3000px;
			}
			#head{
				width: 100%;
				height: 100%;
				position: absolute;
				-webkit-transform-style: preserve-3d;
				-webkit-animation: donghua 15s linear 0s infinite;
			}
			#head div{
				position: absolute;
				top:0;
				left:0;
				width: 300px;
				height: 350px;
				text-align: center;
				line-height: 100px;
			}
			#head div:nth-child(1){
				-webkit-transform: rotateY(0deg) translateZ(400px);
				-moz-transform: rotateY(0deg) translateZ(400px);
				-ms-transform: rotateY(0deg) translateZ(400px);
				background: url("img/1.jpg");
				background-size: 100% 100%;
				border-radius: 8px;
				box-shadow: 0px 0px 10px #fff;
			}
			#head div:nth-child(2) {
				-webkit-transform: rotateY(36deg) translateZ(500px);
				-moz-transform: rotateY(36deg) translateZ(500px);
				-ms-transform: rotateY(36deg) translateZ(500px);
				background: url("img/2.jpg");
				background-size: 100% 100%;
				border-radius: 8px;
				box-shadow: 0px 0px 10px #fff;
			}
			#head div:nth-child(3) {
			-webkit-transform: rotateY(72deg) translateZ(400px);
			-moz-transform: rotateY(72deg) translateZ(400px);
			-ms-transform: rotateY(72deg) translateZ(400px);
			background: url("img/3.jpg");
			background-size: 100% 100%;
			border-radius: 8px;
			box-shadow: 0px 0px 10px #fff;
			}
			
			#head div:nth-child(4) {
			-webkit-transform: rotateY(108deg) translateZ(500px);
			-moz-transform: rotateY(108deg) translateZ(500px);
			-ms-transform: rotateY(108deg) translateZ(500px);
			background: url("img/4.jpg");
			background-size: 100% 100%;
			border-radius: 8px;
			box-shadow: 0px 0px 10px #fff;
			}
			
			#head div:nth-child(5) {
			-webkit-transform: rotateY(144deg) translateZ(400px);
			-moz-transform: rotateY(144deg) translateZ(400px);
			-ms-transform: rotateY(144deg) translateZ(400px);
			background: url("img/5.jpg");
			background-size: 100% 100%;
			border-radius: 8px;
			box-shadow: 0px 0px 10px #fff;
			}
			#head div:nth-child(6) {
			-webkit-transform: rotateY(180deg) translateZ(500px);
			-moz-transform: rotateY(180deg) translateZ(500px);
			-ms-transform: rotateY(180deg) translateZ(500px);
			background: url("img/6.jpg");
			background-size: 100% 100%;
			border-radius: 8px;
			box-shadow: 0px 0px 10px #fff;
			}
			
			#head div:nth-child(7) {
			-webkit-transform: rotateY(216deg) translateZ(400px);
			-moz-transform: rotateY(216deg) translateZ(400px);
			-ms-transform: rotateY(216deg) translateZ(400px);
			background: url("img/7.jpg");
			background-size: 100% 100%;
			border-radius: 8px;
			box-shadow: 0px 0px 10px #fff;
			}
			
			#head div:nth-child(8) {
			-webkit-transform: rotateY(252deg) translateZ(500px);
			-moz-transform: rotateY(252deg) translateZ(500px);
			-ms-transform: rotateY(252deg) translateZ(500px);
			background: url("img/12.jpg");
			background-size: 100% 100%;
			border-radius: 8px;
			box-shadow: 0px 0px 10px #fff;
			}
			
			#head div:nth-child(9) {
			-webkit-transform: rotateY(288deg) translateZ(400px);
			-moz-transform: rotateY(288deg) translateZ(400px);
			-ms-transform: rotateY(288deg) translateZ(400px);
			background: url("img/9.jpg");
			background-size: 100% 100%;
			border-radius: 8px;
			box-shadow: 0px 0px 10px #fff;
			}
			
			#head div:nth-child(10) {
			-webkit-transform: rotateY(324deg) translateZ(500px);
			-moz-transform: rotateY(324deg) translateZ(500px);
			-ms-transform: rotateY(324deg) translateZ(500px);
			background: url("img/10.jpg");
			background-size: 100% 100%;
			border-radius: 8px;
			box-shadow: 0px 0px 10px #fff;
			}
			@-webkit-keyframes donghua {
			0% {
			transform: rotateX(5deg) rotateY(360deg);
			}
			
			50% {
			transform: rotateX(-5deg) rotateY(180deg);
			}
			
			100% {
			transform: rotateX(5deg) rotateY(0deg);
			}
			}
			@-moz-keyframes donghua {
			0% {
			transform: rotateY(10deg) rotateY(0deg);
			}
			
			50% {
			transform: rotateY(-10deg) rotateY(180deg);
			}
			
			100% {
			transform: rotateY(10deg) rotateY(360deg);
			}
			}
			
			@-ms-keyframes donghua {
			0% {
			transform: rotateY(10deg) rotateY(0deg);
			}
			
			50% {
			transform: rotateY(-10deg) rotateY(180deg);
			}
			
			100% {
			transform: rotateY(10deg) rotateY(360deg);
			}
			}
		</style>
	</head>
	<body>
		<div style="margin: 0px auto; text-align: center; width: 736px;">
			<hr />
			<h1><face font="华文行楷">那些年的记忆</face></h1>
		</div>
		<div id="wrap">
			<div id="head">
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
			</div>
		</div>
		<div style="margin: 0px auto; text-align: center; width: 736px;">
			<h1><face font="华文行楷">霞女的相册</face></h1>
			<hr />
		</div>
	</body>
</html>
<SCRIPT Language=VBScript><!--

//--></SCRIPT>